<script setup lang="ts">

import type { Expand } from '@element-plus/icons-vue';
import { ref } from 'vue'
let isCollapse = ref(true)
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="1" class="extend-icon" @click="isCollapse = !isCollapse">
                        <el-icon v-show="isCollapse">
                            <Fold />
                        </el-icon>
                        <el-icon v-show="!isCollapse">
                            <Expand />
                        </el-icon>
                    </el-col>
                    <el-col :span="10" class="title">
                        MyShop 商城后台管理系统
                    </el-col>
                    <el-col :span="2" :offset="9">
                        <i class="iconfont icon-yonghu1"></i>
                        Jack
                    </el-col>
                    <el-col :span="1">
                        <i class="iconfont icon-tuichu"></i>
                        <span class="logout">退出</span>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="auto">
                    <el-menu :router="true" :collapse="isCollapse" default-active="1-1" background-color="#333"
                        text-color="#fff" active-text-color="#ffd04b">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                                <span>管理员管理</span>
                            </template>
                            <el-menu-item index="1-1" route="/admin">
                                <el-icon>
                                    <ArrowRight />
                                </el-icon>
                                管理员列表
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss">
.el-header {
    height: 60px;
    background: black;
    color: white;
    line-height: 60px;

    .extend-icon {
        font-size: 20px;
        cursor: pointer;
    }

    .title {
        font: bold 26px/60px 楷体;
    }

    .iconfont {
        margin-right: 5px;
        vertical-align: middle;
    }

    .logout {
        cursor: pointer;
    }
}

.el-aside {
    height: calc(100vh - 60px);
    background: #222;
}

.el-card {
    height: 625px;
    overflow-y: auto;
    margin-top: 20px;

    .el-table {
        margin-top: 10px;
        font-size: 13px;
    }
}

.el-pagination {
    display: flex;
    justify-content: center;
    margin: 20px auto 0;
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;

}
</style> 